<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>轨迹回放(路书)</title>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #map_canvas {
            width: 100%;
            height: 900px;
        }

        #result {
            width: 100%
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=wIt2mDCMGWRIi2pioR8GZnfrhSKQHzLY"></script>
    <script src="./lushu1.js"></script>
</head>

<body>
    <div id="map_canvas"></div>
    <div id="result"></div>
    <button id="run">开始</button>
    <button id="stop">停止</button>
    <button id="pause">暂停</button>
    <button id="hide">隐藏信息窗口</button>
    <button id="show">展示信息窗口</button>
    <script>
        var marker;
        var map = new BMap.Map('map_canvas');
        map.enableScrollWheelZoom();
        map.centerAndZoom();
        /**
 * @description:2019.08.14 
 * @param {mylushu} 路书实体，一个路书实体对象代表一辆车
 * @param {position} 车辆信息，包括坐标信息
 * @param {carNo} 车牌号，表示地图显示主体车辆
 * @return: void
 * @author: DJDU
 */
        // 设置一个路书实体，一个路书实体在地图上相当于一辆小车，首次新建实体，下次传入实体，便于连续移动，不必移除实体
        function makeLuShu(carlushu, position, carMaster) {
            debugger
            var driving = new BMap.DrivingRoute(map);     //路书驾车实例
            // 具有起始坐标和目标坐标
            // if (position.endPot.lat != null) {
            //     // 用于判断车辆是否离线
            //     if (position.endPot.lat) {
            //         var p1 = new BMap.Point(position.startpot.lng, position.startpot.lat); // 起始坐标
            //         var p2 = new BMap.Point(position.endPot.lng, position.endPot.lat); // 目标坐标
            //         var distance = map.getDistance(p1, p2); //两点之间的距离，返回两点之间的距离，单位是米
            //         if (distance > 10 && !carlushu.getMoving()) {// carlushu是传入的之前保存的路书实体，用于车辆在地图上持续顺滑移动
            //             // getMoving 自定义方法，判断车辆是否正在移动
            //             driving.search(p1, p2); // 检索起点与终点的通过路径
            //             driving.setSearchCompleteCallback(function (results) {// 设置检索结束后的回调函数
            //                 //如果驾车距离过大，大于1500米，证明gps定位偏离，则不执行移动
            //                 if (results.getPlan(0).getDistance(false) < 1500) {
            //                     var arrPois = [],
            //                         plan = driving.getResults().getPlan(0);// 返回最近一次检索的结果

            //                     for (var j = 0; j < plan.getNumRoutes(); j++) {
            //                         var route = plan.getRoute(j);
            //                         arrPois = arrPois.concat(route.getPath());
            //                     }
            //                     carlushu.goPath(arrPois); // 设置小车持续移动的坐标点，形成平滑的路径
            //                     // makeMoreCarMessageHtml(position, carlushu);// 添加自定义展示窗口信息，由于异步，只能通过函数调用
            //                 }
            //             });
            //         }
            //     }
            //     // 车辆已离线，且只会触发一次
            //     else {
            //         if (position.isonline) {
            //             layer.msg(position.carNo + "已离线");
            //             // 关键代码，模拟车辆从离线变为在线
            //             carlushu._marker.setIcon(new BMap.Icon("img/offline_90.png", new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) }));
            //             carlushu._marker.setRotation(carlushu._marker.getRotation());
            //             position.isonline = false;
            //         }
            //     }
            //     return null;
            // }

            // 只有起始坐标(只有首次点击车辆才会执行)
            if (position.startpot.lat != null ) {
                debugger
                var p = new BMap.Point(position.startpot.lng, position.startpot.lat);
                var arrPois = [];
                var photo = "http://122.51.227.164:9000/myphone/mms.png";
                arrPois = arrPois.concat(p); // 用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
                if (carMaster) { // 选择多车时的主视野车
                    map.setViewport(arrPois);//根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
                }
                if (position.isonline) {
                    photo = 'img/online_90.png';
                }
                var newlushu = new BMapLib.LuShu(map, arrPois, { // 创建路数实体
                    defaultContent: position.carNo,//展示车牌号
                    moreCarMessage: "",// 自定义展示窗口，用于展示车辆详细信息
                    autoView: false,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                    icon: new BMap.Icon(photo, new BMap.Size(37, 50), { anchor: new BMap.Size(18, 25) }),
                    speed: 10,// 车辆移动速度
                    enableRotation: true,//是否设置marker随着道路的走向进行旋转
                });
                // makeMoreCarMessageHtml(position, newlushu);// 添加自定义展示窗口信息，由于异步，只能通过函数调用
                newlushu.start();// 路数实体开始移动


                //添加路书点击事件
                map.addEventListener('click', startlushu);
                function startlushu(e) {
                    if (!!e.overlay) {// 地图上的覆盖物
                        var markerId = newlushu._marker.ba;// 路数实体的在地图上的唯一标识
                        if (e.overlay.ba == markerId) {
                            newlushu._overlay._div2.style.visibility = "visible"; // 打开自定义详细信息窗口
                            newlushu._overlay._div.style.background = "#F40";
                            newlushu._overlay._div.style.color = "#FFF";
                        }
                    }
                }
                return newlushu;
            }
        }    // 核心代码,定时器，更新小车下一目标点
        var PointArr = [
            {
                startpot: { lat: 36.10339957700999, lng: 120.4207801005104 }, endPot: { lat: 36.107014665948654, lng: 120.42193587265254 },isonline:false
            }];
        // var PointArr = [
        //     {
        //         lat: 36.10339957700999, lng: 120.4207801005104
        //     }, { lat: 36.107014665948654, lng: 120.42193587265254 }
        // ];
        // map.centerAndZoom(PointArr, 13);// 根据经纬度显示地图的范围
        // map.setViewport(PointArr);// 根据提供的地理区域或坐标设置地图视野
        // var lushu2 = new BMapLib.LuShu(map, PointArr, {
        //     defaultContent: "粤A30781",//"从天安门到百度大厦"
        //     autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
        //     icon: new BMap.Icon('http://122.51.227.164:9000/myphone/mms.png', new BMap.Size(37, 50), { anchor: new BMap.Size(18, 25) }),
        //     speed: 10,
        //     enableRotation: true,//是否设置marker随着道路的走向进行旋转
        //     // landmarkPois: [
        //     //     { lng: 116.306954, lat: 40.05718, html: '加油站', pauseTime: 2 }
        //     // ]

        // });
        // lushu2.start();
        var lushu2 = new BMapLib.LuShu();
        // lushu2.start();
        // setInterval(() => {
        //     debugger
        //     // for (var carNum = 0; carNum < positions.length; carNum++) {
            var carMaster = true;
            makeLuShu(lushu2, PointArr[0], carMaster);
            //     moli(positions[carNum].carNo);
            // }
            // 请求后台获取坐标、实时报警、表格地理位置更新
            // if (positions.length > 0) {
            // alerts();
            // tableCarMsg();
            // }
        // }, 3000);


    </script>
</body>

</html>